import  { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { Item } from "../utils/types";
import { Space } from 'antd';
import {
    EyeOutlined,
    ShareAltOutlined
} from '@ant-design/icons';
import 'moment/locale/zh-cn';
import { Modal } from 'antd';
import { QRCodeSVG } from 'qrcode.react';
const moment = require('moment');
export interface IAppProps {

}
function App() {
    const [data, setData] = useState([]);
    const [item, setItem] = useState([]);
    const navigate = useNavigate();
    const [isModalVisible, setIsModalVisible] = useState(false);

    useEffect(() => {
        axios.get('/api/knowledge').then((res) => {
            console.log(res.data.data);
            setData(res.data.data[0])
        })
    }, []);
    const goDesc = (item: any) => {
        navigate(`/desc/${item.id}`, {
            state: {
                item
            }
        })
    };
    const showModal = (item: any) => {
        setIsModalVisible(true);
        console.log(item);
        setItem(item)

    };
    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    return (
        <div>
            <p>所有</p>
            {
                data ? data.map((item: Item, index: number) => {
                    return <dl>
                        <dd>
                            <h3 key={index} onClick={() => goDesc(item)}><b>{item.title}</b> |<span>{moment().startOf('day').fromNow()}</span></h3>
                            <p>{item.summary}</p>
                            <p>
                                <span>
                                    <Space><EyeOutlined /></Space>
                                </span>
                                <span>{item.likes}</span> ·
                                <span>
                                    <Space><ShareAltOutlined /></Space>
                                </span>
                                <span onClick={() => {
                                    showModal(item)
                                }}>分享</span>
                            </p>
                        </dd>
                        <dt><img src={item.cover} alt="" /></dt>
                    </dl>
                })
                    : '暂无数据'

            }

            <Modal title="分享海报" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p><img src={(item as any).cover} alt="" /></p>
                <p><b>{(item as any).title}</b></p>
                <p>{(item as any).summary}</p>
                <dl className='dl'>
                    <dt>
                        <QRCodeSVG value="https://reactjs.org/" />
                    </dt>
                    <dd>
                        <p>识别二维码查看文章</p>
                        <p>原文分享自 小楼又清风</p>
                    </dd>
                </dl>
            </Modal>
        </div>
    )
}

export default App